<template>
    <div style="width: 100%; height: 100%">
        <div class="basicKnowledgeContainers">
            <div class="basicKnowledgeContainers_content">
                <div class="basicKnowledgeContainers_content_left">
                    <leftNav :leftArr="leftArr" @navClick="navClickEvent"></leftNav>
                </div>
                <div class="basicKnowledgeContainers_content_rightContainers">
                    <div class="basicKnowledgeContainers_content_right">
                    <div class="basicKnowledgeContainers_content_right_textcontent" v-html="textContent">

                    </div>
                    <div class="basicKnowledgeContainers_content_right_imgcontent" v-if="showCurrent==11">
                        <img src="https://img1.baidu.com/it/u=397651648,97537492&fm=253&fmt=auto&app=138&f=JPEG?w=497&h=342" alt=""
                            class="basicKnowledgeContainers_content_right_imgcontent_img" />
                            <img src="https://pic1.zhimg.com/80/v2-cd8504854ce684ecb70e07ab8505b144_720w.webp" alt=""
                            class="basicKnowledgeContainers_content_right_imgcontent_img" />
                            <img :src="getImgUrl(sliceObj.previewUrl)" alt=""
                            class="basicKnowledgeContainers_content_right_imgcontent_img" @click="exclude(sliceObj)"/>
                    </div>
                </div>
                </div>
             

            </div>
        </div>
    </div>
</template>

<script>
import leftNav from './leftNav.vue'
export default {
    name: 'basicKnowledge',
    components: {
        leftNav
    },
    data() {
        return {
            imageServiceURL: process.env.VUE_APP_ImageServiceURL, // 图片服务器地址
            leftArr: [{
                id: 1,
                label: '适应',
                num: 500,
                level: 1,
                children: [{
                    id: 11,
                    label: '萎缩',
                    num: 500,
                    level: 2,
                }, {
                    id: 12,
                    label: '肥大',
                    num: 500,
                    level: 2,
                }, {
                    id: 13,
                    label: '增生',
                    num: 500,
                    level: 2,
                }, {
                    id: 14,
                    label: '化生',
                    num: 500,
                    level: 2,
                },]
            }, {
                id: 2,
                label: '细胞可逆性损伤',
                num: 500,
                level: 1,
                children: []
            }, {
                id: 3,
                label: '细胞死亡',
                num: 500,
                level: 1,
                children: []
            }
            ],
            sliceObj:{
                    biopsyHistoryId: 95,
                    diagnosisId: 2731,
                    id: 5954,
                    labelUrl: "/_uploads/PHOTO/1694066485516.jpg",
                    newFilename: "0f8445683ebff2d1586d03e448ef18f4_1694066430890.svs",
                    pathologyId: "202309071404",
                    previewUrl: "/_uploads/PHOTO/1694066485529.jpg",
                    sampleOrganName: "胃肠道间质瘤病理"
                },
            textContent:'',
            textContent11: '<div style="font-size:20px;font-weight:700;" id="content11">萎缩</div><div>萎缩(atrophy)是指已发育正常的细胞,组织或器官的体积缩小。萎缩时细胞合成代谢降低,能量需求减少,原有功能下降。组织与器官的萎缩,除了实质细胞内物质丧失而致体积缩小外,还可以伴有实质细胞数量的减少。组织器官的未曾发育或发育不全不属于萎缩范畴。<div>(一)萎缩的类型</div><div>装缩分为生理性萎缩和病理性萎缩两类。</div><div><span style="font-weight:700;">1.生理性萎缩(physioogicalatrophy)</span> 见于胸腺青春期萎缩和生殖系统中卵巢、子宫及睾丸的更年期后萎缩等。大部分生理性萎缩时,细胞数量减少是通过细胞凋亡实现的。</div><div><span style="font-weight:700;">2.病理性萎缩(pathological atrophy) </span> 按其发生原因分为:</div><div>(1)营养不良性巷缩(atrophy due lo inadequate natrition):可因蛋白质摄人不足,消耗过多和血液供应不足引起,分为:①全身营养不良性萎缩,如糖尿病,结核病及肿瘤等慢性消耗性疾病时,由于长期营养不良引起全身肌肉萎缩,称为恶病质:②)局部肯养不良性萎缩,如脑动脉粥样硬化后,血管壁增厚、管腔变窄,脑组织缺乏足够血液供应引起脑萎缩。萎缩的细胞,组织和器官通过调节细胞体积、数量和功能,以适应降低的血液供应和营养补给。</div><div>(2)压迫性萎缩(atrophy due lopressuze):因组织与器官长期受压所致,其机制是受压组织和细胞缺氧、血。例如肝、脑,肺肿瘤推挤压迫,可致邻近正常组织萎缩:尿路梗阻时舒主积水,压迫周围肾组织,引起肾皮质、髓质萎缩(图1-3);右心功能不全时,肝小叶中央静脉及其周围血实淤血,也会引起邻近肝继胞因受压而萎缩。</div></div>',
            showCurrent:0,


        };
    },
    mounted() {
        const { state } = this.$store;


    },
    computed: {
        device() {
            return this.$store.state.device
        }
    },
    methods: {
        getImgUrl(url) {
            return this.imageServiceURL + url
        },
        exclude(val) {
            console.log(val)
            const { state } = this.$store;
            const { href } = this.$router.resolve({
                name: 'Viewer',
                path: '/Viewer',
                query: {
                    fileName: val.newFilename,
                    // originFilename: val.originFilename,
                    pathologyId: val.pathologyId,
                    biopsyId: val.id,
                    authorization: this.$store.state.authorization,
                    userId: state.user.id
                }
            });
            const width = window.screen.availWidth + 10;
            const height = window.screen.availHeight + 10;
            window.open(
                href,
                'doctorWorkstation',
                `location=no,width=${width},height=${height}`
            );
        },
        navClickEvent(data){
         //  console.log(data)
           this.showCurrent=data.id
           if(data.id==11){
            this.textContent=this.textContent11
           }else{
            this.textContent=`<div style="font-size:20px;font-weight:700;" id="content${data.id}">${data.label}</div>`
           }
        //    if(data.level==1){
            
        //    }else if(data.level==2){
        //        if(data.label){

        //        }
        //    }
        }

    },
};
</script>

<style scoped lang="scss">
.basicKnowledgeContainers {
    background: #fff;
    height: 100%;
    width: 100%;

    &_content {
        display: flex;
        align-content: center;
        height: 100%;
        width: 100%;

        &_left {
            width: 140px;
            height: 100%;
            border-right: 1px solid #ddd;
            overflow-y: auto;
        }

        &_left::-webkit-scrollbar {
            width: 4px;
        }

        &_left::-webkit-scrollbar-track {
            border-radius: 10px;
            /*滚动条的背景区域的圆角*/
            -webkit-box-shadow: inset 0 0 6px rgba(238, 238, 238, 0.3);
            background-color: #eeeeee;
            cursor: pointer;
            /*滚动条的背景颜色*/
        }

        &_left::-webkit-scrollbar-thumb {
            border-radius: 10px;
            /*滚动条的圆角*/
            -webkit-box-shadow: inset 0 0 6px rgba(145, 143, 0143, 0.3);
            background-color: #3a62d7 !important;
            cursor: pointer;
            /*滚动条的背景颜色*/
        }
        &_rightContainers{
            width: calc(100% - 145px);
            height:100%;
            box-sizing: border-box;
            padding: 10px;
        }
        &_right {
           width:100%;
            height:100%;
            overflow-y: auto;

            &_textcontent {
                font-size: 14px;
                line-height: 28px;
                text-indent: 2em;
            }
            &_imgcontent{
                display:flex;
                align-items: center;
                flex-wrap: wrap;
                &_img{
                    width:200px;
                    height:200px;
                    border:1px solid #eee;
                    display: block;
                    margin:5px;
                    cursor: pointer;
                    background:#f7f7f7;
                }
            }
        }

        &_right::-webkit-scrollbar {
            width: 4px;
            display: none;
        }
    }
}
</style>
